<!--
 * @Description: 招聘-简历
 * @Author: rcc
 * @Date: 2024-08-08 11:40:04
 * @FilePath: /rc-recruitment/pages/tab-page/hiring-resume/hiring-resume.vue
-->

<template>
	<view class="page">
		<up-navbar title="收到的简历投递" placeholder :titleStyle="titleStyle" bgColor="#1269FF">
			<template #left>
				<view class="flex"></view>
			</template>
		</up-navbar>

		<up-sticky bgColor="#fff">
			<up-tabs :list="tabs" :scrollable="false" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"
				lineColor="#3F77FB"></up-tabs>
		</up-sticky>

		<view class="m-t40 p-h24">
			<view class="card flex-d-lc" v-for="index in 10" :key="index">
				<view class="relative flex-r w p-v10">
					<view class="tag">新</view>
					<text class="text-400-326">5分钟前</text>
				</view>

				<view class="flex w p-b20 border-b4">
					<image class="cover" src="https://cdn.uviewui.com/uview/swiper/swiper1.png" mode="aspectFill"></image>

					<view class="flex-1 flex-d-lc m-l20">
						<text class="text-700-130">刘鑫 | 男 | 20岁</text>
						<text class="m-t10 text-400-326">四川大学 | 本科 | 计算机软件 </text>
					</view>
				</view>

				<view class="flex w h-88">
					<text class="text-400-326">投递了</text>
					<text class="flex-1 m-l10 text-700-526">服务员</text>
					<text class="text-400-326">青羊区 | 大专 | 3年工作经验 | 全职</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

const titleStyle = {
	'color': '#fff',
	'font-size': '34rpx',
	'font-weight': 'bold',
}

const activeStyle = {
	color: '#3F77FB',
	'font-size': '28rpx',
	'font-weight': 'bold',
}

const inactiveStyle = {
	color: '#666666',
	'font-size': '28rpx',
	'font-weight': 'bold',
}

const tabs = reactive([
	{ name: '未处理' },
	{ name: '面试' },
	{ name: '不合适' },
])
</script>

<style lang="scss" scoped>
.page {
	width: 100%;
	min-height: 100%;
	padding-bottom: 20rpx;
	// #ifdef H5
	padding-bottom: 100rpx;
	// #endif
	background-color: $page-color-4;
}

.card {
	margin-bottom: 20rpx;
	padding: 0 20rpx;
	border-radius: 10rpx;
	background-color: $bg-color-1;

	.tag {
		position: absolute;
		top: 0;
		left: -20rpx;
		width: 44rpx;
		height: 32rpx;
		color: #E51C23;
		font-size: 24rpx;
		text-align: center;
		line-height: 32rpx;
		background-color: #FFD9DA;
		border-radius: 10rpx 0rpx 10rpx 0rpx;
	}

	.cover {
		width: 102rpx;
		height: 102rpx;
		border-radius: 10rpx;
		border: 1rpx solid $border-color-4;
	}
}
</style>